<template>
  <div class="add-role-modal">
    <a-modal
      wrapClassName="add-role-modal"
      width="40%"
      :open="open"
      title="新增角色"
      @ok="clickOk"
      @cancel="clickCancel"
    >
      <div class="input-box">
        <div class="item">
          <div class="text">角色名称</div>
          <a-input class="input" placeholder="请输入"> </a-input>
        </div>
        <div class="item">
          <div class="text">权限字符</div>
          <a-input class="input" placeholder="请输入"> </a-input>
        </div>
        <div class="item">
          <div class="text">角色顺序</div>
          <a-input class="input" placeholder="请输入"> </a-input>
        </div>
        <div class="item">
          <div class="text">状态</div>
          <a-radio-group class="input" value="1">
            <a-radio value="1">正常</a-radio>
            <a-radio value="2">停用</a-radio>
          </a-radio-group>
        </div>
        <div class="item">
          <div class="text">菜单权限</div>
          <a-checkbox-group
            class="input"
            v-model:value="checkedList"
            :options="plainOptions"
          />
        </div>
        <div class="item menu">
          <div class="text"></div>
          <div class="input">
            <a-tree
              v-model:expandedKeys="expandedKeys"
              v-model:checkedKeys="checkedKeys"
              checkable
              :tree-data="treeData"
              :selectable="false"
            >
              <template #title="{ title, key }">
                <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{
                  title
                }}</span>
                <template v-else>{{ title }}</template>
              </template>
            </a-tree>
          </div>
        </div>
        <div class="item remark">
          <div class="text">备注</div>
          <a-textarea class="input" placeholder="请输入"> </a-textarea>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
// 引入组件&方法
import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
const props = defineProps({
  open: {
    default: false,
  },
})
const emits = defineEmits(['cancel'])
// 自定义数据源
const checkedList = ref(['展开/折叠'])
const plainOptions = ref(['展开/折叠', '全选/全不选', '父子联动'])
const treeData = ref([
  {
    title: '工单统计',
    key: '1',
    children: [
      {
        title: '业务报告',
        key: '11',
      },
      {
        title: 'VPN 自动打网',
        key: '12',
      },
    ],
  },
  {
    title: '知识库',
    key: '2',
    children: [
      {
        title: '文档管理',
        key: '21',
      },
      {
        title: '个人收藏',
        key: '22',
      },
    ],
  },
  {
    title: '云盾告警',
    key: '3',
    children: [
      {
        title: '活动告警',
        key: '31',
      },
      {
        title: '历史告警',
        key: '32',
      },
      {
        title: '告警统计',
        key: '33',
      },
    ],
  },
  {
    title: '巡检管理',
    key: '4',
    children: [
      {
        title: '巡检记录',
        key: '42',
      },
      {
        title: '巡检结果',
        key: '43',
      },
    ],
  },
  {
    title: '日志',
    key: '5',
    children: [
      {
        title: '接口日志',
        key: '51',
      },
      {
        title: '系统日志',
        key: '52',
      },
      {
        title: '系统日常日志',
        key: '53',
      },
    ],
  },
  {
    title: '权限管理',
    key: '6',
    children: [
      {
        title: '用户管理',
        key: '61',
      },
      {
        title: '角色管理',
        key: '62',
      },
    ],
  },
])
const expandedKeys = ref(['0-0-0', '0-0-1'])
const checkedKeys = ref(['0-0-0', '0-0-1'])
// 生命周期函数
onMounted(() => {})
// 自定义方法
//关闭对话框
const clickCancel = () => {
  emits('cancel')
}
//点击确定
const clickOk = () => {}
</script>
<style lang="less" scoped>
.add-role-modal {
  .input-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
      display: flex;
      align-items: center;
      margin-bottom: (20 / @vh);
      width: 100%;
      .text {
        margin-right: (10 / @vw);
        width: (100 / @vw);
        text-align: right;
      }
      .input {
        flex: 1;
      }
    }
    .menu {
      .input {
        padding: (10/@vw);
        border: 1px solid #d9d9d9;
        border-radius: 6px;
      }
    }
    .remark {
      align-items: start;
      width: 100%;
    }
  }
}
</style>
